<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
    <script>
        window.onload = function() {

            var vm = new Vue({

                // 绑定标签
                el: ".box",
                // 声明变量
                data: {
                    msg: "操作标签的数",
                    imgSrc: './images/3.jpeg',
                    counter: 0
                },
                // 定义功能函数
                methods: {
                    fnAdd: function() {
                        // this 代表当前操作的对象
                        this.counter += 1
                    }
                },
            })
        }
    </script>
</head>

<body>

    <div class="box">
        <!-- 1. 操作标签的数据  {{ }}-->
        <p>{{ msg }}</p>

        <!-- 2. 操作标签的属性  v-bind-->
        <img v-bind:src="imgSrc">

        <!-- 3. 操作标签的事件 v-on-->
        <button v-on:click="fnAdd">{{ counter }}</button>
    </div>

</body>

</html>